import { useState } from 'react'
import { Button, CenterPopup, Toast } from 'antd-mobile'
import { CloseOutline } from 'antd-mobile-icons'
import { type Training } from '../../services/dataService'
import './schedule-popup.css'

interface SchedulePopupProps {
  visible: boolean
  onClose: () => void
  training: Training | null
}

const SchedulePopup = ({ visible, onClose, training }: SchedulePopupProps) => {
  const [selectedDate, setSelectedDate] = useState<number | null>(null)

  // 模拟一周的日期数据
  const weekDates = [
    { day: '日', date: 14, available: true },
    { day: '一', date: 15, available: true, isSelected: true }, // 默认选中
    { day: '二', date: 16, available: true },
    { day: '三', date: 17, available: false },
    { day: '四', date: 18, available: true },
    { day: '五', date: 19, available: true },
    { day: '六', date: 20, available: true }
  ]

  const handleDateSelect = (date: number, available: boolean) => {
    if (!available) return
    setSelectedDate(date)
  }

  const handleConfirm = () => {
    const selected = selectedDate || 15 // 默认选中15号
    Toast.show({
      content: `预定成功！训练时间：12月${selected}日`,
      duration: 2000
    })
    onClose()
  }

  if (!training) return null

  return (
    <CenterPopup
      visible={visible}
      onMaskClick={onClose}
      bodyStyle={{
        borderRadius: '20px',
        padding: 0,
        width: '320px',
        maxWidth: '90vw'
      }}
    >
      <div className="schedule-popup">
        {/* 关闭按钮 */}
        <button className="close-btn" onClick={onClose}>
          <CloseOutline />
        </button>

        {/* 标题 */}
        <div className="popup-title">预定训练</div>

        {/* 日期选择 */}
        <div className="date-selector">
          {weekDates.map((item, index) => (
            <div
              key={index}
              className={`date-item ${!item.available ? 'disabled' : ''} ${
                (selectedDate === item.date || (!selectedDate && item.isSelected)) ? 'selected' : ''
              }`}
              onClick={() => handleDateSelect(item.date, item.available)}
            >
              <div className="day-label">{item.day}</div>
              <div className="date-number">{item.date}</div>
            </div>
          ))}
        </div>

        {/* 确认按钮 */}
        <Button
          color="primary"
          size="large"
          block
          onClick={handleConfirm}
          className="confirm-btn"
        >
          我要预定
        </Button>
      </div>
    </CenterPopup>
  )
}

export default SchedulePopup
